<template>
  <div>
    <Card shadow>
      <Form
        ref="searchForm"
        :model="pageParams"
        inline
        :label-width="80">
        <FormItem label="策略名称" prop="policyName">
          <Input type="text" v-model="pageParams.policyName" placeholder="请输入关键字"/>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSearch(1)">查询</Button>&nbsp;
          <Button @click="handleResetForm('searchForm')">重置</Button>
        </FormItem>
      </Form>
      <div class="table-operator">
        <ButtonGroup>
          <Button
            :disabled="$auth('gatewayIpLimitEdit')?false:true"
            class="search-btn"
            type="primary"
            @click="handleModal()">
            <span>新增</span>
          </Button>
        </ButtonGroup>
      </div>
      <s-table :url="$apis.ipLimit.page" :columns="columns" :params="pageParams" ref="table">
        <template slot="policyType" slot-scope="{ row }">
          <Tag color="green" v-if="row.policyType===1">允许-白名单</Tag>
          <Tag color="red" v-else="">拒绝-黑名单</Tag>
        </template>
        <template slot="action" slot-scope="{ row }">
          <Button
            size="small"
            type="text"
            :disabled="$auth('gatewayIpLimitEdit')?false:true"
            @click="handleModal(row)">
            编辑</Button>
          <Button
            size="small"
            type="text"
            :disabled="$auth('gatewayIpLimitEdit')?false:true"
            @click="handleRemove(row)">
            删除</Button>
        </template>
      </s-table>
    </Card>
    <policy-modal ref="policyModal" @reloadTable="handleSearch"></policy-modal>
  </div>
</template>

<script>
import PolicyModal from './modal'

export default {
  name: 'GatewayIpLimit',
  components: { PolicyModal },
  data () {
    return {
      pageParams: {
        policyName: ''
      },
      columns: [
        {
          title: '策略名称',
          key: 'policyName',
          width: 200
        },
        {
          title: '策略类型',
          width: 300,
          slot: 'policyType',
          filters: [
            {
              label: '拒绝-黑名单',
              value: 0
            },
            {
              label: '允许-白名单',
              value: 1
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === 0) {
              return row.policyType === 0
            } else if (value === 1) {
              return row.policyType === 1
            }
          }
        },
        {
          title: 'IP地址/域名',
          key: 'ipAddress'
        },
        {
          title: '更新时间',
          key: 'updateTime'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 150
        }
      ]
    }
  },
  methods: {
    handleModal (data) {
      this.$refs['policyModal'].handleShow(data)
    },
    handleSearch () {
      this.$refs['table'].search()
    },
    handleRemove (data) {
      this.$http.delete(this.$apis.ipLimit.remove, { policyId: data.policyId }, this).then(res => {
        this.handleSearch()
      })
    }
  },
  mounted: function () {
    this.handleSearch()
  }
}
</script>
